<template>
	<view class="box">
		<!-- markdown -->
		<mp-html :content="markdown" markdown="true" v-if="page.type == 'markdown'" />
		<!-- 店家 -->
		<u-cell-group v-if="is_store">
			<u-cell v-for="item in product_list" @click="show_popup = true" size="large" :title="item.title" arrow-direction="true" isLink="true" :label="item.lable" icon-style="height: 60px; width: 60px" icon="https://mp-artical-static-1309973429.cos.ap-nanjing.myqcloud.com/hourglass.png"></u-cell>
		</u-cell-group>
		<u-popup mode="bottom" :show="show_popup" @close="close_popup" v-if="is_store" round="10" custom-style="padding: 10px;">
			<u-text type="info" text="基本信息" margin="5px"></u-text>
			<u-text text="这是一个示例"></u-text>
			<u-text type="warning" text="注意事项" margin="5px"></u-text>
			<u-text text="这是一个示例"></u-text>
		</u-popup>
		
		<!-- 列表 -->
<!-- 		<u-list v-if="page.type == 'list'">
			<u-list-item v-for="list_item in list_content">
				<u-cell :title="list_item.title" :icon="list_item.image_src" @click="handle(list_item.index_src, list_item.id, list_item.title)"></u-cell>
			</u-list-item>
		</u-list> -->
		<u-grid col="2" v-if="page.type == 'list'">
			<u-grid-item v-for="list_item in list_content" @click="handle(list_item.index_src, list_item.id, list_item.title)">
				<u-image :src="list_item.image_src" width="40vw" height="40vw"/>
				<view> {{ list_item.title }} </view>
			</u-grid-item>
		</u-grid>
		
		<hb-comment ref="hbComment" @add="addComment" @like="like" @del="like" :deleteTip="'确认删除？'" :cmData="commentData" v-if="commentData"/>
	</view>
</template>

<script>
	import mpHtml from '@/components/mp-html/mp-html'
	import {build_commentList, like, add_comment} from '@/static/global_function.js'
	export default {
		components: {
			  mpHtml
		},
		data() {
			return {
				markdown: "## 你好 \n ## 页面加载中 \n ### 或者出于不知道什么原因（大概率是网络） 😰 \n #### 这个页面寄了 🤒 \n Err page: \n ",
				product_list: [
					{
						title: "示例1",
						lable: "标签1",
					},
					{
						title: "示例2",
						lable: "标签2",
					},
					{
						title: "示例1",
						lable: "标签1",
					},
					{
						title: "示例2",
						lable: "标签2",
					},
					{
						title: "示例1",
						lable: "标签1",
					},
					{
						title: "示例2",
						lable: "标签2",
					},
					{
						title: "示例1",
						lable: "标签1",
					},
					{
						title: "示例2",
						lable: "标签2",
					},
				],
				list_content: [],
				// is_markdown: false,
				// is_store: false,
				page: {
					type: "markdown"
				},
				show_popup: false,
				commentData: {comment:[]},
				id: null
			}
		},
		onLoad(options) {// /base?url=<>
			this.id = options.article_id
			if(options.url.split(".").slice(-1)[0].includes("md")) {//markdown
				uni.request({
					url: options.url,
				})
				.then((data) => {
					this.markdown = data.data
					
				})
				.catch(this.markdown += options.url.toString())
				this.page.type = "markdown"
			} else if (options.url.split(".").slice(-1)[0].includes("store")){
				this.page.type = "store"
			} else if (options.url.split(".").slice(-1)[0].includes("list")) {
				let tags = options.url.split(".").slice(0,-1)[0].split(';')
				tags.forEach(tag => {
					uni.request({
						url: getApp().globalData.base_url + "/get/usefulmodules_bytag/" + tag
					})
					.then(data => {
						data.data.forEach(mod => {
							this.list_content.push(mod)
						})
					})
				})
				
				this.page.type = "list"
			}
			// #ifdef APP-PLUS
			
			// #endif
			else {
				this.markdown += options.url.toString()
			}
			
			uni.setNavigationBarTitle({
				title: options.title,
			})
			build_commentList(options.article_id)
			.then(res => this.commentData = res)
		},
		methods: {
			like,
			addComment(t) {
				add_comment(t, this.id).then(res => {
					this.commentData = res
					this.$refs.hbComment.addComplete()
				})
			},
			close_popup() {
				this.show_popup = false
			},
			handle(turl, id, title) {
				uni.navigateTo({url: "/pacA/pages/artical/artical?url="+turl+"&article_id="+id+"&title="+title})
			}
		},
		
	}
</script>

<style>
	.box {
		border: 25rpx solid white;
	}
</style>
